<template>
  <div class="storelist">
    <main v-for="(v,i) in indexarr" :key="v.storeid" @click="linklist(v.storeid)">
    <div class="left">
        <img :src="v.storeImg" >
    </div>
    <div class="right">
        <h3>{{v.storeName}}</h3>
        <div class="star">
            <div class="imgs">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
            </div>
            <div class="fen">{{v.storeFen}}</div>
            <div class="price">￥{{v.storePrice}}/人</div>
        </div>
        <span>{{v.storeArea}}</span>
        <ul>
            <li>缓解压力</li>
            <li>采耳</li>
            <li>电影房</li>
            <li>养生</li>
            <li>SPA</li>
            <li>刮痧</li>
        </ul>
        <p>
            <img src="zhangyifan/imgs/indexsmall2.gif" alt=""> 
            <span>{{v.storeIp}}</span>
        </p>
        <p>
            <img src="zhangyifan/imgs/indexsmall2.gif" alt="">
            <span>{{v.storeTime}}</span>
        </p>
    </div>
    </main>
  </div>
</template>

<script>
import {zindexCom} from '@/api/zhangyifan.js'
export default {
    data(){
        return{
            indexarr:[]
        }
    },
    created(){
        zindexCom({tpid:4}).then((ok)=>{
            console.log(ok.data);
            this.indexarr=ok.data.data
        })
    },
    methods:{
        linklist(i){
            this.$router.push({name:'xiyulist',query:{val:i}});
        }
    }
}
</script>

<style scoped lang='scss'>
    main{
        display: flex;
        width: 100%;
        height: 48vw;
        border-bottom: 1.067vw solid #f5f5f5;
        justify-content: space-around;
        .left{
            margin: 4vw 0;
            img{
                width: 22.933vw;
            }
        }
        .right{
            margin: 4vw 0;
            .star{
                height: 5.333vw;
                line-height: 5.333vw;
                display: flex;
                margin: 0.8vw 0;
                .imgs{
                    img{
                        margin-right: 0.533vw;
                    }
                }
                .fen{
                    color:#f47d39;
                }
                .price{
                    font-size: 3.733vw;
                }
            }
            span{
                color: gray;
                font-size: 3.733vw;
            }
            ul{
                display: flex;
                margin: 1.333vw 0;
                li{
                    background-color: #f5f5f5;
                    margin-right: 2.133vw;
                    height: 4.8vw;
                    font-size: 3.2vw;
                    padding: 0.8vw;
                    line-height: 4.8vw;
                }
            }
            p{
                margin: 1.333vw 0;
                font-size: 3.733vw;
                height: 4.8vw;
                display: flex;
                img{
                    line-height: 4.8vw;
                    margin-right: 0.8vw;
                }
                span{
                    color: black;
                }
            }
        }
    }
</style>